<script setup lang="ts">
    import {ElRow, ElCol, ElCard, ElSkeleton} from 'element-plus'
    import {CountTo} from '@/components/CountTo'
    import {useDesign} from '@/hooks/web/useDesign'
    import {useI18n} from '@/hooks/web/useI18n'
    import {ref, reactive} from 'vue'
    import {
        getCountApi,
        getUserAccessSourceApi,
        getWeeklyUserActivityApi,
        getMonthlySalesApi
    } from '@/api/asd/analysis'
    import type {video} from '@/api/asd/analysis/types'

    const {t} = useI18n()

    const {getPrefixCls} = useDesign()

    const prefixCls = getPrefixCls('panel')

    const loading = ref(true)

    let totalState = reactive<video>({
        counts: 0,
        browsed: 0,
        collection: 0,
        give: 0
    })
   const getCount = async () =>{
       const res = await getCountApi().catch(() =>{}).finally(() =>{loading.value = false})
       const res1=  await getUserAccessSourceApi().catch(() =>{}).finally(() =>{loading.value = false})
       const res2 = await getWeeklyUserActivityApi().catch(() =>{}).finally(() =>{loading.value = false})
       const res3 = await getMonthlySalesApi().catch(() =>{}).finally(() =>{loading.value = false})
       if (res){
           totalState.counts = res.data
       }
       if (res1){
           totalState.browsed = res1.data
       }
       if (res2){
           totalState.collection = res2.data
       }
       if (res3){
           totalState.give = res3.data
       }
   }
   getCount()
</script>

<template>
    <ElRow :gutter="20" justify="space-between" :class="prefixCls">
        <ElCol :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <ElCard shadow="hover" class="mb-20px">
                <ElSkeleton :loading="loading" animated :rows="2">
                    <template #default>
                        <div :class="`${prefixCls}__item flex justify-between`">
                            <div>
                                <div :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`">
                                    <Icon icon="clarity:camera-solid" :size="40"/>
                                </div>
                            </div>
                            <div class="flex flex-col justify-between">
                                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{t('analysis.fileVideoNum')}}</div>
                                <CountTo
                                        class="text-20px font-700 text-right"
                                        :start-val="0"
                                        :end-val= "totalState.counts"
                                        :duration="2600"/>
                            </div>
                        </div>
                    </template>
                </ElSkeleton>
            </ElCard>
        </ElCol>
        <ElCol :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <ElCard shadow="hover" class="mb-20px">
                <ElSkeleton :loading="loading" animated :rows="2">
                    <template #default>
                        <div :class="`${prefixCls}__item flex justify-between`">
                            <div>
                                <div
                                        :class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
                                >
                                    <Icon icon="ic:baseline-menu-book" :size="40"/>
                                </div>
                            </div>
                            <div class="flex flex-col justify-between">
                                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
                                    t('analysis.browsed')
                                    }}
                                </div>
                                <CountTo
                                        class="text-20px font-700 text-right"
                                        :start-val="0"
                                        :end-val= "totalState.browsed"
                                        :duration="2600"
                                />
                            </div>
                        </div>
                    </template>
                </ElSkeleton>
            </ElCard>
        </ElCol>

        <ElCol :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <ElCard shadow="hover" class="mb-20px">
                <ElSkeleton :loading="loading" animated :rows="2">
                    <template #default>
                        <div :class="`${prefixCls}__item flex justify-between`">
                            <div>
                                <div
                                        :class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
                                >
                                    <Icon icon="mingcute:star-line" :size="40"/>
                                </div>
                            </div>
                            <div class="flex flex-col justify-between">
                                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
                                    t('analysis.collect')
                                    }}
                                </div>
                                <CountTo
                                        class="text-20px font-700 text-right"
                                        :start-val="0"
                                        :end-val= "totalState.collection"
                                        :duration="2600"
                                />
                            </div>
                        </div>
                    </template>
                </ElSkeleton>
            </ElCard>
        </ElCol>

        <ElCol :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
            <ElCard shadow="hover" class="mb-20px">
                <ElSkeleton :loading="loading" animated :rows="2">
                    <template #default>
                        <div :class="`${prefixCls}__item flex justify-between`">
                            <div>
                                <div
                                        :class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
                                >
                                    <Icon icon="clarity:thumbs-up-line" :size="40"/>
                                </div>
                            </div>
                            <div class="flex flex-col justify-between">
                                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
                                    t('analysis.liked')
                                    }}
                                </div>
                                <CountTo
                                        class="text-20px font-700 text-right"
                                        :start-val="0"
                                        :end-val="totalState.give"
                                        :duration="2600"
                                />
                            </div>
                        </div>
                    </template>
                </ElSkeleton>
            </ElCard>
        </ElCol>
    </ElRow>
</template>

<style lang="less" scoped>
    @prefix-cls: ~'@{namespace}-panel';

    .@{prefix-cls} {
        &__item {
            &--peoples {
                color: #40c9c6;
            }

            &--message {
                color: #36a3f7;
            }

            &--money {
                color: #f4516c;
            }

            &--shopping {
                color: #34bfa3;
            }

            &:hover {
                :deep(.@{namespace}-icon) {
                    color: #fff !important;
                }

                .@{prefix-cls}__item--icon {
                    transition: all 0.38s ease-out;
                }

                .@{prefix-cls}__item--peoples {
                    background: #40c9c6;
                }

                .@{prefix-cls}__item--message {
                    background: #36a3f7;
                }

                .@{prefix-cls}__item--money {
                    background: #f4516c;
                }

                .@{prefix-cls}__item--shopping {
                    background: #34bfa3;
                }
            }
        }
    }
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .center-box{
        margin-bottom: 20px;
    }
</style>
